<template>
    <div class="content-main">
        <div class="breadcrumb">
            <div class="breadcrumb-icon">
                <img src="./../../assets/images/breadcrumb_icon.png" />
            </div>
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/teacher/classTrainingStatistics' }">教学统计</el-breadcrumb-item>
                <el-breadcrumb-item>统计详情</el-breadcrumb-item>
            </el-breadcrumb>
            <bread-crumb-back></bread-crumb-back>
        </div>
        <div class="content-box">
            <div class="statistics-analysis-item item-first">
                <div class="statistics-analysis-title">
                    <div class="title-fl">
                        <span></span>数据统计
                    </div>
                </div>
                <div class="statistics-analysis-box">
                    <el-row>
                        <el-col>
                            <span class="col-num">{{ projectStatisticsVO.stuNum}}</span>
                            <span class="col-text">学习人数</span>
                        </el-col>
                        <el-col>
                            <span class="col-num">{{ projectStatisticsVO.enterProjectEnvironmentNum}}</span>
                            <span class="col-text">进入虚拟环境次数</span>
                        </el-col>
                         <el-col>
                            <span class="col-num">{{ projectStatisticsVO.enterProjectNum }}</span>
                            <span class="col-text">查看案例数</span>
                        </el-col>
                        <el-col>
                            <span class="col-num">{{ projectStatisticsVO.viewPresetItemTotalNum }}</span>
                            <span class="col-text">进入教学模式次数</span>
                        </el-col>
                        <el-col>
                            <span class="col-num">{{ projectStatisticsVO.viewCustomItemTotalNum }}</span>
                            <span class="col-text">进入练习模式次数</span>
                        </el-col>
                        <el-col>
                            <span class="col-num">{{ projectStatisticsVO.totalTestTime}}</span>
                            <span class="col-text">案例实训总时长</span>
                        </el-col>
                        <el-col>
                            <span class="col-num">{{ projectStatisticsVO.averageTestTime}}</span>
                            <span class="col-text">案例实训平均时长</span>
                        </el-col>
                        <!-- <el-col>
                            <pie-echart :id="'data-echarts'" :data="options" style="width: 100%;height:110px;"></pie-echart>
                            <div class="echarts-text">
                                <ul>
                                    <li>及格率</li>
                                    <li>案例报告提交率</li>
                                    <li>案例报告批改率</li>
                                </ul>
                            </div>
                        </el-col> -->
                    </el-row>
                </div>
            </div>
            <div class="search-box">
                <div class="search-item">
                    <el-select
                        v-model="projectValue"
                        placeholder="请选择"
                        value-key="value"
                        style="float:left;">
                        <el-option
                        v-for="item in projectStatus"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div class="search-item">
                    <el-button type="primary" @click="searchFn">搜索</el-button>
                </div>
            </div>
            <div class="statistics-analysis-item item-first" v-for="(item, index) in classProjectStatisticsList">
                <div class="statistics-analysis-title">
                    <div class="title-fl">
                        <span></span>{{ item.className }}
                    </div>
                </div>
                <div class="statistics-analysis-content">
                    <div class="statistics-analysis-left">
                        <el-row>
                            <el-col :span="12">
                                <span class="col-num">{{ item.stuNum }}</span>
                                <span class="col-text">学习人数</span>
                            </el-col>
                            <el-col :span="12">
                                <span class="col-num">{{ item.totalTestTime }}</span>
                                <span class="col-text">案例实训总时长</span>
                            </el-col>
                            <el-col :span="12">
                                <span class="col-num">{{ item.enterProjectEnvironmentNum }}</span>
                                <span class="col-text">进入虚机环境数</span>
                            </el-col>
                            <el-col :span="12">
                                <span class="col-num">{{ item.averageTestTime }}</span>
                                <span class="col-text">案例实训平均时长</span>
                            </el-col>
                        </el-row>
                        <!-- <pie-echart :id="'analysis-echarts'+(index+1)" :data="options2[index]" style="width: 100%;height:110px;"></pie-echart>
                        <div class="echarts-text">
                            <el-col :span="8" align="center">及格率</el-col>
                            <el-col :span="8" align="center">案例报告提交率</el-col>
                            <el-col :span="8" align="center">案例报告批改率</el-col>
                        </div> -->
                    </div>
                    <div class="statistics-analysis-right">
                        <!-- <div class="statistics-analysis-right-title">总成绩统计</div>
                        <pie-echart :id="'total-achievement-echarts'+(index+1)" :data="options3[index]" style="height:150px;"></pie-echart> -->
                        <div class="statistics-analysis-right-title">提交文件大小(KB)</div>
                        <pie-echart :id="'project-courseware-num-echarts'+(index+1)" :data="options4[index]" style="height:150px;"></pie-echart>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import BreadCrumbBack from '@/components/breadCrumbBack.vue'
    import pieEchart from './../../components/pieEchart.vue'
    export default {
        components: {
            pieEchart,
            BreadCrumbBack
        },
        data () {
            return {
                projectId: '',
                projectStatus: [
                    {
                        value: '',
                        label: '全部'
                    },
                    {
                        value: 1,
                        label: '已结项'
                    },
                    {
                        value: 0,
                        label: '未结项'
                    }
                ],
                projectValue: '',
                options: {},
                projectStatisticsVO: '',
                classProjectStatisticsList: '',
                options2: [],
                // options3: [],
                options4: []

            }
        },
        created () {
            this.projectId = this.$route.query.projectId
            this.init()
        },
        methods: {
            init(){
                let self = this
                self.$http.post('/dataplatform/basis/functions/statistics/t/getProjectClassStatistics?projectId='+self.projectId+'&relationState='+self.projectValue).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.projectStatisticsVO = res.data.projectStatisticsVO
                        self.classProjectStatisticsList = res.data.classProjectStatisticsList

                        //数据采集饼图数据
                        self.classPie(res.data)
                        //班级饼图数据
                        self.classProjectPie(res.data)
                        // //总成绩统计
                        // self.totalEchart(res.data)
                        //提交文件数量
                        self.coursewareNumEchart(res.data)

                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //搜索
            searchFn(){
                let self = this
                self.$http.post('/dataplatform/basis/functions/statistics/t/getProjectClassStatistics?projectId='+self.projectId+'&relationState='+self.projectValue).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.classProjectStatisticsList = res.data.classProjectStatisticsList
                        //班级饼图数据
                        self.classProjectPie(res.data)
                        //总成绩统计
                        self.totalEchart(res.data)
                        //提交文件数量
                        self.coursewareNumEchart(res.data)

                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //数据采集饼图数据
            classPie(data){
                let self = this
                self.options = {
                    series:[
                        {
                            name:'及格率',
                            type:'pie',
                            radius: ['60%', '75%'],
                            center : ['17%', '60%'],
                            avoidLabelOverlap: false,
                            hoverAnimation: false,
                            itemStyle : {
                                normal : {
                                    label : {
                                        show : false   //隐藏标示文字
                                    },
                                    labelLine : {
                                        show : false   //隐藏标示线
                                    }
                                }
                            },
                            data:[
                                {
                                    value: (100-data.projectStatisticsVO.passRate),
                                    name:''+(100-data.projectStatisticsVO.passRate)+'%',
                                    itemStyle: {
                                        color: '#fff'
                                    }
                                },
                                {
                                    value: data.projectStatisticsVO.passRate,
                                    name: ''+data.projectStatisticsVO.passRate == 0 ? (0+'%') : data.projectStatisticsVO.passRate+'%',
                                    label: {
                                        show: true,
                                        position: 'center',
                                        color: '#fff',
                                        fontSize: 20,
                                        formatter: '{b}',
                                        textStyle: {
                                            baseline : 'bottom'
                                        },
                                    },
                                    itemStyle: {
                                        color: 'rgba(0,0,0,0)'
                                    },
                                    emphasis:{
                                        itemStyle: {
                                            color: '#fff'
                                        }
                                    }
                                }
                            ]
                        },
                        {
                            name:'案例报告提交率',
                            type:'pie',
                            radius: ['60%', '75%'],
                            center : ['49%', '60%'],
                            avoidLabelOverlap: false,
                            hoverAnimation: false,
                            itemStyle : {
                                normal : {
                                    label : {
                                        show : false   //隐藏标示文字
                                    },
                                    labelLine : {
                                        show : false   //隐藏标示线
                                    }
                                }
                            },
                            data:[
                                {
                                    value: (100-data.projectStatisticsVO.reportSubmitRate),
                                    name:''+(100-data.projectStatisticsVO.reportSubmitRate)+'%',
                                    itemStyle: {
                                        color: '#fff'
                                    }
                                },
                                {
                                    value: data.projectStatisticsVO.reportSubmitRate,
                                    name: ''+data.projectStatisticsVO.reportSubmitRate == 0 ? (0+'%') : data.projectStatisticsVO.reportSubmitRate+'%',
                                    label: {
                                        show: true,
                                        position: 'center',
                                        color: '#fff',
                                        fontSize: 20,
                                        formatter: '{b}',
                                        textStyle: {
                                            baseline : 'bottom'
                                        }
                                    },
                                    itemStyle: {
                                        color: '#fff'
                                    },
                                    emphasis:{
                                        itemStyle: {
                                            color: '#fff'
                                        }
                                    }
                                }
                            ]
                        },
                        {
                            name:'案例报告批改率',
                            type:'pie',
                            radius: ['60%', '75%'],
                            center : ['83%', '60%'],
                            avoidLabelOverlap: false,
                            hoverAnimation: false,
                            itemStyle : {
                                normal : {
                                    label : {
                                        show : false   //隐藏标示文字
                                    },
                                    labelLine : {
                                        show : false   //隐藏标示线
                                    }
                                }
                            },
                            data:[
                                {
                                    value: (100-data.projectStatisticsVO.reportCheckRate),
                                    name:''+(100-data.projectStatisticsVO.reportCheckRate)+'%',
                                    itemStyle: {
                                        color: '#fff'
                                    }
                                },
                                {
                                    value: data.projectStatisticsVO.reportCheckRate,
                                    name: ''+data.projectStatisticsVO.reportCheckRate == 0 ? (0+'%') : data.projectStatisticsVO.reportCheckRate+'%',
                                    label: {
                                        show: true,
                                        position: 'center',
                                        color: '#fff',
                                        fontSize: 20,
                                        formatter: '{b}',
                                        textStyle: {
                                            baseline : 'bottom'
                                        }
                                    },
                                    itemStyle: {
                                        color: '#fff'
                                    },
                                    emphasis:{
                                        itemStyle: {
                                            color: '#fff'
                                        }
                                    }
                                }
                            ]
                        }
                    ]
                }
            },
            //班级饼图数据
            classProjectPie(data){
                let self = this
                for(let i = 0; i < data.classProjectStatisticsList.length; i++){
                    let json = {
                        series: [
                            {
                                name:'及格率',
                                type:'pie',
                                radius: ['60%', '72%'],
                                center : ['17%', '60%'],
                                avoidLabelOverlap: false,
                                hoverAnimation: false,
                                itemStyle : {
                                    normal : {
                                        label : {
                                            show : false   //隐藏标示文字
                                        },
                                        labelLine : {
                                            show : false   //隐藏标示线
                                        }
                                    }
                                },
                                data:[
                                    {
                                        value: (100-data.classProjectStatisticsList[i].passRate),
                                        name:''+(100-data.classProjectStatisticsList[i].passRate)+'%',
                                        itemStyle: {
                                            color: '#58a8e8'
                                        }
                                    },
                                    {
                                        value: data.classProjectStatisticsList[i].passRate,
                                        name: ''+data.classProjectStatisticsList[i].passRate == 0 ? (0+'%') : data.classProjectStatisticsList[i].passRate+'%',
                                        label: {
                                            show: true,
                                            position: 'center',
                                            color: '#58a8e8',
                                            fontSize: 20,
                                            formatter: '{b}',
                                            textStyle: {
                                                baseline : 'bottom'
                                            },
                                        },
                                        itemStyle: {
                                            color: '#58a8e8'
                                        },
                                        emphasis:{
                                            itemStyle: {
                                                color: '#58a8e8'
                                            }
                                        }
                                    }
                                ]
                            },
                            {
                                name:'案例报告提交率',
                                type:'pie',
                                radius: ['60%', '72%'],
                                center : ['49%', '60%'],
                                avoidLabelOverlap: false,
                                hoverAnimation: false,
                                itemStyle : {
                                    normal : {
                                        label : {
                                            show : false   //隐藏标示文字
                                        },
                                        labelLine : {
                                            show : false   //隐藏标示线
                                        }
                                    }
                                },
                                data:[
                                    {
                                        value: (100-data.classProjectStatisticsList[i].reportSubmitRate),
                                        name:''+(100-data.classProjectStatisticsList[i].reportSubmitRate)+'%',
                                        itemStyle: {
                                            color: '#58a8e8'
                                        }
                                    },
                                    {
                                        value: data.classProjectStatisticsList[i].reportSubmitRate,
                                        name: ''+data.classProjectStatisticsList[i].reportSubmitRate == 0 ? (0+'%') : data.classProjectStatisticsList[i].reportSubmitRate+'%',
                                        label: {
                                            show: true,
                                            position: 'center',
                                            color: '#58a8e8',
                                            fontSize: 20,
                                            formatter: '{b}',
                                            textStyle: {
                                                baseline : 'bottom'
                                            }
                                        },
                                        itemStyle: {
                                            color: '#58a8e8'
                                        },
                                        emphasis:{
                                            itemStyle: {
                                                color: '#58a8e8'
                                            }
                                        }
                                    }
                                ]
                            },
                            {
                                name:'案例报告批改率',
                                type:'pie',
                                radius: ['60%', '72%'],
                                center : ['82%', '60%'],
                                avoidLabelOverlap: false,
                                hoverAnimation: false,
                                itemStyle : {
                                    normal : {
                                        label : {
                                            show : false   //隐藏标示文字
                                        },
                                        labelLine : {
                                            show : false   //隐藏标示线
                                        }
                                    }
                                },
                                data:[
                                    {
                                        value: (100-data.classProjectStatisticsList[i].reportCheckRate),
                                        name:''+(100-data.classProjectStatisticsList[i].reportCheckRate)+'%',
                                        itemStyle: {
                                            color: '#58a8e8'
                                        }
                                    },
                                    {
                                        value: data.classProjectStatisticsList[i].reportCheckRate,
                                        name: ''+data.classProjectStatisticsList[i].reportCheckRate == 0 ? (0+'%') : data.classProjectStatisticsList[i].reportCheckRate+'%',
                                        label: {
                                            show: true,
                                            position: 'center',
                                            color: '#58a8e8',
                                            fontSize: 20,
                                            formatter: '{b}',
                                            textStyle: {
                                                baseline : 'bottom'
                                            }
                                        },
                                        itemStyle: {
                                            color: '#58a8e8'
                                        },
                                        emphasis:{
                                            itemStyle: {
                                                color: '#58a8e8'
                                            }
                                        }
                                    }
                                ]
                            }
                        ]
                    }
                    self.options2.push(json)
                }
            },
            //总成绩统计
            totalEchart(data){
                let self = this
                let scoreArr = [], userNameArr = []
                for(let i = 0; i < data.classProjectStatisticsList.length; i++){
                    for (let j = 0; j < data.classProjectStatisticsList[i].scoreList.length; j++) {
                        scoreArr.push(data.classProjectStatisticsList[i].scoreList[j].score)
                        userNameArr.push(data.classProjectStatisticsList[i].scoreList[j].userName)
                    }
                    let json = {
                        dataZoom: [
                            {
                                show: true,
                                realtime: true,
                                start: 25,
                                end: 85
                            }
                        ],
                        xAxis: {
                            type: 'category',
                            data: userNameArr
                        },
                        yAxis: {
                            name : '分数',
                            type: 'value',
                            max: Math.max(...scoreArr)
                        },
                        grid: {
                            left: '0',   //图表距边框的距离
                            right: '0',
                            bottom: '25',
                            containLabel: true,
                            x:10,
                            y:10,
                            borderWidth:1,
                        },
                        textStyle:{
                            fontSize:15,
                            color:'#727272'
                        },
                        series: [{
                            data: scoreArr,
                            type: 'line'
                        }]
                    }
                    self.options3.push(json)
                }
            },
            //提交文件数量
            coursewareNumEchart(data){
                let self = this
                for(let i = 0; i < data.classProjectStatisticsList.length; i++){

                    let fileSizeArr = [], userNameArr = []
                    for (let j = 0; j < data.classProjectStatisticsList[i].fileSizeList.length; j++) {
                        fileSizeArr.push(data.classProjectStatisticsList[i].fileSizeList[j].fileSize)
                        userNameArr.push(data.classProjectStatisticsList[i].fileSizeList[j].userName)
                    }
                    let json = {
                        dataZoom: [
                            {
                                show: true,
                                realtime: true,
                                start: 25,
                                end: 85
                            }
                        ],
                        xAxis: {
                            type: 'category',
                            data: userNameArr
                        },
                        yAxis: {
                            name : '分数',
                            type: 'value',
                            max: Math.max(...fileSizeArr)
                        },
                        grid: {
                            left: '0',   //图表距边框的距离
                            right: '0',
                            bottom: '25',
                            containLabel: true,
                            x:10,
                            y:10,
                            borderWidth:1,
                        },
                        textStyle:{
                            fontSize:15,
                            color:'#727272'
                        },
                        series: [{
                            data: fileSizeArr,
                            type: 'line'
                        }]
                    }
                    self.options4.push(json)
                }
                console.log(self.options4)
            }
        }
    }
</script>
